<template>
	<div id="app">
		<div>
			<input v-model="name"/>
			<input v-model="address"/>
			<button @click="handle1" > 增加 </button>
			<br />
			<br />
			<br />
			<table border>
				<tr>
					<th>姓名</th>
					<th>地址</th>
					<th>身份证</th>
					<th>操作</th>		
				</tr>
				<tr v-for="item in userlist"  :key='item.id'>
					<td>{{item.name}}</td>
					<td>{{item.address}}</td>
					<td>{{item.id}}</td>
					<td>
						<button @click="remove(item.id)">删除</button>
						<button >修改</button>
					</td>
				</tr>
			</table>
		</div>		
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'App',
		components: {

		},
		created() {
			var that = this
			axios.get('/api/users').then(res => {
				console.log(res)
				that.userlist = res.data.users
			})
		},
		data (){
			return{
				userlist: [{
					name: '',
					address:'',
					id:''
				}],
				
				name:'',
				address:''
			}	
		},
		methods:{
			handle1(){
				var that = this
				axios.post('/api/add/users',{
					name: this.name,
					address:this.address
				}).then(res=>{
					that.userlist = res.data.users
				})
			},
			remove(val){
				var that = this
				axios.post('/api/remove/users',{
					val: val
				}).then(res=>{
					that.userlist = res.data.users
				})
			}
		}
	}
</script>

<style>
	#app {}
	
</style>
